<template>
  <el-scrollbar height="650px">
    <div style="display: flex">
      <div style="width: 16%;">
        <div style="text-align: center;padding:7px 30px 21px 30px;">全部部门</div>
        <div style="padding: 1px 10px 0px 10px">
          <el-input
              v-model="input2"
              class="w-50 m-2"
              placeholder="请输入部门"
              :suffix-icon="Search"
          />
          <el-tree style="margin-top: 20px"
                   default-expand-all
                   :data="data" :props="defaultProps" @node-click="handleNodeClick" />
        </div>
      </div>
      <div style="width: 84%;padding-left: 20px;">
        <el-form :inline="true">
          <el-form-item label-width="68px" label="员工名称">
            <el-input v-model="souform.name" placeholder="请输入员工名称" />
          </el-form-item>
          <el-form-item label-width="96px" label="员工身份信息">
            <el-input v-model="souform.card" placeholder="请输入员工身份信息" />
          </el-form-item>
          <el-form-item label-width="40px" label="状态">
            <el-select v-model="souform.region" placeholder="员工状态">
              <el-option label="正常" value="正常" />
              <el-option label="停用" value="停用" />
            </el-select>
          </el-form-item>
          <el-form-item class="botton-group">
            <el-button type="primary">搜索</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
        <div class="el-form1">
          <el-button @click="add();is=!is" :disabled="xindisablid" type="primary" plain>新增</el-button>
          <el-button type="info" plain :disabled="deletebutton">删除</el-button>
          <el-button type="warning" plain>导出</el-button>
        </div>
        <div v-if="is" style="display: flex;margin-bottom: 20px">
          <div>
            <el-form>
              <el-form-item label-width="90px" label="员工姓名">
                <el-input v-model="form.rolename" />
              </el-form-item>
              <el-form-item label-width="90px" label="手机号码">
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
              <el-form-item label-width="90px" label="身份证号码">
                <el-input v-model="form.idCard"></el-input>
              </el-form-item>
              <el-form-item label-width="90px" label="银行卡号码">
                <el-input v-model="form.bank"></el-input>
              </el-form-item>
              <el-form-item label-width="90px" label="部门">
                <el-select v-model="form.dept" placeholder="请选择部门">
                  <el-option label="考勤部" value="1" />
                  <el-option label="后勤部" value="2" />
                </el-select>
              </el-form-item>
              <div style="text-align: center">
                <el-button type="primary" @click="onSubmit">确定</el-button>
                <el-button @click="cancel()">取消</el-button>
              </div>
            </el-form>
          </div>
        </div>
        <el-table
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        >
          <el-table-column align="center" type="selection" />
          <el-table-column align="center" label="工号" width="130">
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column align="center" property="name" label="员工姓名" width="120" />
          <el-table-column align="center" property="address" label="部门" width="120"/>
          <el-table-column align="center" property="order" label="手机号码" width="120" show-overflow-tooltip/>
          <el-table-column align="center" property="state" label="状态" show-overflow-tooltip>
            <template #default="scope">
              <el-switch
                  v-model="scope.row.on"
                  @change="changeSwitch(scope.row)"/>
            </template>
          </el-table-column>
          <el-table-column align="center" property="" label="操作" show-overflow-tooltip>
            <template #default="scope">
              <el-button @click="xiu(scope.row);is=!is" type="primary" :disabled="towtdisabled" plain>修改</el-button>
              <el-button type="primary" plain>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row justify="center">
          <el-col>
            <el-pagination
                v-model:currentPage="pageNo"
                v-model:page-size="pageSize"
                :page-sizes="[5,10, 20, 30, 40]"
                small="small"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length"
                @size-change="sizeChange"
                @current-change="currentChange"/>
          </el-col>
        </el-row>
      </div>
    </div>

  </el-scrollbar>
</template>
<script setup lang="ts">
import {ref} from "@vue/reactivity";
import {reactive} from "vue";
import {useRouter} from "vue-router";
import { Search } from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox} from "element-plus";
//确定按钮
const onSubmit=()=>{
  is.value=false//隐藏表单
  towtdisabled.value=false//启用table修改按钮
  xindisablid.value=false//启用新增按钮
}
//取消按钮
const cancel=()=>{
  is.value=false//隐藏表单
  towtdisabled.value=false//启用table修改按钮
  xindisablid.value=false//启用新增按钮
}
//状态按钮
const changeSwitch=(data)=>{
  if(data.on!=true){
    ElMessageBox.confirm(
        '确认要停用"'+data.name+'"角色吗？',
        '系统提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    ).then(() => {
      ElMessage({
        type: 'success',
        message: '停用成功！',
      })
      data.on=false
    })
  }else{
    ElMessageBox.confirm(
        '确认要启用"'+data.name+'"角色吗？',
        '系统提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    ).then(() => {
      ElMessage({
        type: 'success',
        message: '启用成功！',
      })
      data.on=true
    })
  }

  console.log(data)
}
//分页
const pageNo =ref();
const pageSize=ref();
//分页方法
const sizeChange = (size) => {
  pageSize.value = size;
  //getData(d.pageNo);
}
const currentChange = (pageNo) => {
  //getData(pageNo);
}
//表格数据接口
interface User {
  date: string
  name: string
  address: string
  order:Number
}
const multipleSelection = ref<User[]>([])
//点击表格复选框
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
  if (val.length!=0){
    deletebutton.value=false
  }else{
    deletebutton.value=true
  }
}
//新增角色按钮
const add=()=>{
  towtdisabled.value=true
  xindisablid.value=true
  console.log(1)
}
//修改角色按钮
const xiu=(data)=>{
  towtdisabled.value=true
  xindisablid.value=true
  form.rolename=data.name
  form.phone=data.order
  form.dept=data.address
  console.log(data)
}
//搜索表单
const souform = reactive({
  name: '',
  region: '',
  card:''
})
//新增角色表单
const form = reactive({
  name: '',//姓名
  dept: '',//部门
  phone:'',//电话
  idCard:'',//身份证号码
  bank:'',//银行卡号码
})
//角色显示隐藏
const is=ref(false)
//table角色表格
const tableData = [
  {
    date: '1',
    name: 'cjl',
    address: '考勤部',
    order:17670658392
  },
  {
    date: '2',
    name: 'lbw',
    address: '人事部',
    order:2
  },
  {
    date: '3',
    name: 'hj',
    address: '后勤部',
    order:3
  }
]
//用户状态
const value1 = ref(true)
//权限树
const data = [
  {
    id: 1,
    label: '考勤部门',
  },
  {
    id: 2,
    label: '后勤部门',
  }
]
//权限树
const defaultProps = {
  children: 'children',
  label: 'label',
}
//路由
const router=useRouter();
//控制删除，可用不可可用
const deletebutton=ref(true)
//控制新增，可用不可用
const xindisablid=ref(false)
//table修改，可用不可用
const towtdisabled=ref(false)
</script>

<style>
.el-form1{
  display: flex;text-align: center;margin-bottom: 20px;
}
.el-form1 div{
  margin-right: 5px;
}
.el-form-item__label{
  width: 80px;
}
.el-form-item__content{
  width: 200px;
}
.findtitle{
  text-align: center;
  line-height: 30px;
  width: 80px;
  height: 25px;
}
.botton-group{
  width: 140px;
}
</style>